<template>
  <div class="ckerk_time_line__">
    <!--时间线-->
    <div class="time_line">
      <div class="time_line_history">
        <div class="tl-timeline">
          <div v-for="item in listDeals" :key="item.id" class="tl-container right">
            <div class="date">{{ item.id }}</div>
            <div class="content">
              <h2>
                {{ item.createTime }}
              </h2>
              <div class="time_line_body">
                <div class="consultation">
                  <div v-if="item.money">{{ item.money }} {{ ' ' + '元' }}</div>
                  <div v-if="item.item">{{ item.item }}</div>
                  <div v-if="item.analysis">{{ item.analysis }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import { getDealsByCid } from '@/api/ym';
import '@/assets/css/timeline2.css';

export default {
  name: 'ClerkBill',
  data() {
    return {
      isFetching: false,
      listDeals: [],
    };
  },
  methods: {
    loadBillList: async function (cid) {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      const errAlertMsg = '查询顾客成交历史失败';
      this.listDeals.splice(0, this.listDeals.length);
      await getDealsByCid(cid)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret && ret.length > 0) {
            this.listDeals.push(...ret);
          }
        })
        .catch(err => {
          console.log('getDealsByCid', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';

.ckerk_time_line__ {
  width: 100%;
  padding: 0 0 0 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: normal;
  background: none;

  .time_line {
    width: 100%;
    height: 100vh;
    background-color: beige;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    .time_line_history {
      width: 100%;
      height: 100vh;
      padding: 0 10px 0 0;
      display: block;
      overflow-x: hidden;
      overflow-y: scroll;
      background: linear-gradient(to bottom, #e5e8ed, #efeff1);
      border: 1px solid #e5e8ed;
      border-radius: 5px 5px 0 0;

      .time_line_body {
        min-height: 40px;
        margin: 0;
        padding: 0 5px 0 5px;
        position: relative;
        font-size: 16px;
        line-height: 16px;
        color: #454545;

        .consultation {
          margin: 5px 0 0 0;
          font-size: 13px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          gap: 20px;
        }
      }
    }
  }
}
</style>
